<style lang="less">
@import "@/styles/table-common.less";
// @import "./companyManage.less";
</style> 
<template>
  <div class="search">
    <Card>
      <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加</Button>
      </Row>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
      
       <template slot-scope="{ row }" slot="operate"><a @click="edit(row)">编辑</a></template>
        <!-- <template slot-scope="{ row }" slot="nickname">{{ row.user.nickname }}</template>
        <template slot-scope="{ row }" slot="mobile">{{ row.user.mobile }}</template> -->
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- <check-password ref="checkPass" @on-success="resetPass" /> -->

    <addEdit
      :dataForm="form"
      :type="showType"
      v-model="showUser"
      @on-submit="getDataList"
    />
  </div>
</template>

<script>
import {getscStreetByCondition } from "@/api/index";

import { shortcuts } from "@/libs/shortcuts";

import addEdit from "./addEdit.vue";
export default {
  name: "user-manage",
  components: {
    addEdit,
  },
  data() {
    return {
        form:{},
      message: "",
      showUser: false,
      showType: "0",
      loading: true,
      searchForm: {
        pageSize: 10,
        pageNumber: 1,
      },
      options: {
        shortcuts: shortcuts,
      },
      columns: [
        {
          title: "街道ID",
          key: "id",
         
          align: "center",
        },
        {
          title: "街道名称",
          key: "title",
         
          align: "center",
        },
        {
          title: "创建人",
          key: "createBy",
       
          align: "center",
        },
        {
          title: "创建时间",
          key: "createTime",
        
          align: "center",
        },
        {
          title: "操作",
          slot: "operate",
          
          align: "center",
        },
      ],
      data: [],
    };
  },
  methods: {
    init() {
      this.getDataList();
    },

    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      getscStreetByCondition(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm = {
        pageSize: 10,
        pageNumber: 1,
      };
      // 重新加载数据
      this.getDataList();
    },
    // getDataList() {
    //   // 多条件搜索用户列表
    //   this.loading = true;
    //   getscStreetByCondition({pageNumber:this.pageNumber,pageSize:this.pageSize}).then(res => {
    //     this.loading = false
    //     if (res.success) {
    //       this.data = res.result
    //     }
    //   })

    // },
    add() {
      this.showType = "0";
      this.showUser = true;
      this.form = {}
    },
    edit(item){
        this.showType = "1"
        this.showUser = true
        console.log("item:",item)
        this.form = item
    }
  },
  created() {},
  mounted() {
    this.init();
  },
};
</script>